<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>设置</title>
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../../../../css/common.css" />
		<link rel="stylesheet" type="text/css" href="./css/index.css" />
	</head>

	<body>
		<div class="mui-content">
			<!-- 设置 -->
			<div class="user-info">
				<div class="info-item">
					<span class="info-text">用户头像</span>
					<input type="image" src="../../../../images/cart/icon_order_logistics_package.png"
						class="avatar-img" />
				</div>
				<div class="info-item" id="resetUserName">
					<span class="info-text">用户昵称</span>
					<div class="info-right">
						<span class="info-right-text">用户大帅哥</span>
						<img src="../../../../images/home/icon_common_arrow_right.png" class="arrow_right">
					</div>
				</div>
				<div class="info-item">
					<span class="info-text">关联微信</span>
					<div class="info-right">
						<span class="info-right-text">未关联</span>
						<img src="../../../../images/home/icon_common_arrow_right.png" class="arrow_right">
					</div>
				</div>
				<div class="info-item" id="bindPhone">
					<span class="info-text">绑定手机</span>
					<div class="info-right">
						<span class="info-right-text">18512341234</span>
						<img src="../../../../images/home/icon_common_arrow_right.png" class="arrow_right">
					</div>
				</div>
			</div>
			<div class="user-info user-info-bottom">
				<div class="info-item" id="user-research">
					<span class="info-text">用户调研</span>
					<div class="info-right">

						<img src="../../../../images/home/icon_common_arrow_right.png" class="arrow_right">
					</div>
				</div>
				<div class="info-item" id="about">
					<span class="info-text">关于我们</span>
					<div class="info-right">

						<img src="../../../../images/home/icon_common_arrow_right.png" class="arrow_right">
					</div>
				</div>
			</div>
			<!-- 退出登录 -->
			<div class="logout">
				退出登录
			</div>
		</div>
		<!-- 弹出 -->
		<div id="popover" class="mui-popover">
			<div class="bind-phone">
				<div class="bind-title">
					绑定手机号
				</div>
				<img src="../../../../images/mine/icon_mine_settings_phone_change.png" class="phone_change">
				<div class="phone-num">
					原号码：<span class="phone">18511045123</span>
				</div>
				<div class="bind-input">
					<div class="bind-input-title">
						新手机号
					</div>
					<input type="text" name="" id="new_phone" value="" placeholder="请输入要换绑的新手机号码..." />
				</div>
				<div class="bind-input" style="margin-top: 1.3125rem;">
					<div class="bind-input-title">
						验证码
					</div>
					<div class="code">
						<input type="text" name="" id="new_phone" value="" placeholder="请输入短信验证码..." />
						<div class="request-code" id="getCaptureFn">
							获取验证码
						</div>
					</div>
				</div>
				<div class="bind-button">
					<div class="cencel-button">
						取消
					</div>
					<div class="makesure-button">
						确定
					</div>
				</div>
			</div>
		</div>

	</body>
	<script src="../../../../js/mui.min.js"></script>
	<script src="../../../../js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../../../js/resize.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../../../js/util.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		mui.init()
		$(function($) {
			// 文档一加载就执行
			obj.setRem()
			// 窗口调节
			$(window).resize(function() {
				obj.setRem()
			});
			// 修改昵称
			$('#resetUserName').click(function() {
				mui.prompt('', '请输入1-8位中英文或数字', '修改昵称', ['取消', '确定'], null, 'div');
			})
			// 绑定手机号
			$('#bindPhone').click(function() {
				mui('#popover').popover('show');
			})
			/* 取消 */
			$('.cencel-button').click(function() {
				mui('#popover').popover('hide');
			})
			// 获取验证码
			$.getCaptureFn();
			// 跳转用户调研
			$('#user-research').click(function(){
				window.location.href = '../userresearch/index.html';
			})
			// 跳转关于
			$('#about').click(function(){
				window.location.href = '../about/index.html';
			})
		});
	</script>
</html>
